<template>
  <div id="abnormalPage">
    <HeadNav
      type="publish"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="publish" sort="abnormal"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">
                  <a-tabs :activeKey="tabKey" @change="callback">
                    <a-tab-pane key="1" tab="销售异动"></a-tab-pane>
                  </a-tabs>
                </div>
              </div>
            </div>
            <!-- 昨日销售异动 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">昨日销售异动</div>
                <div style="padding: 15px 0">
                  <div class="title-block">
                    <span class="trangle red">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trangleTop" />
                      </svg>
                    </span>
                    以下商品在昨日销售异常增长
                  </div>
                  <div class="table" style="margin-bottom: 25px">
                    <table style="table-layout: fixed">
                      <colgroup>
                        <col width="240" />
                        <col width="140" />
                        <col width="100" />
                        <col width="100" />
                        <col width="110" />
                        <col width="360" />
                      </colgroup>
                      <thead>
                        <tr>
                          <td>品种信息</td>
                          <td>类目</td>
                          <td style="text-align: right">平均月销</td>
                          <td style="text-align: right">销售指数</td>
                          <td style="text-align: right">较上周期</td>
                          <td style="text-align: right">简述</td>
                        </tr>
                      </thead>
                      <tbody v-if="dayIncrList.length > 0">
                        <tr v-for="(item, index) in dayIncrList" :key="index">
                          <td>
                            <div class="goods-desc">
                              <span class="goods-image" v-if="item.cover_pic">
                                <img
                                  :src="item.cover_pic"
                                  alt
                                  style="width: 40px; height: 40px"
                                />
                              </span>
                              <span
                                v-else
                                class="no-pic"
                                style="min-width: 40px; min-height: 40px"
                              ></span>
                              <span
                                class="click-font goods-name"
                                @click.stop="$toDetail(item.goods_id)"
                                >{{ item.goods_name }}</span
                              >
                            </div>
                          </td>
                          <td>
                            <span v-if="item.cate_node_2">{{
                              item.cate_node_2
                            }}</span>
                            <span v-if="item.cate_node_3"
                              >> {{ item.cate_node_3 }}</span
                            >
                          </td>
                          <td style="text-align: right">
                            {{ item.month_sales }}
                          </td>
                          <td style="text-align: right">
                            <span class="main-font">{{
                              item.sale_amount.toLocaleString()
                            }}</span>
                          </td>
                          <td style="text-align: right">
                            <span class="percent" v-if="item.compare_rate > 0"
                              >+{{ item.compare_rate }}%</span
                            >
                            <span
                              class="green"
                              v-else-if="item.compare_rate < 0"
                              >{{ item.compare_rate }}%</span
                            >
                            <span v-else>--</span>
                          </td>
                          <td style="text-align: right">
                            <span
                              class="data-tab data-tab-eight data-tab-big"
                              v-for="(citem, cindex) in item.unusual_tags"
                              :key="cindex"
                              >{{ citem }}</span
                            >
                          </td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="6" style="text-align: center">
                            <div style="margin: 50px 0"><a-empty /></div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="title-block">
                    <span class="trangle green">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trangle" />
                      </svg>
                    </span>
                    以下商品在昨日销售异常下降
                  </div>
                  <div class="table">
                    <table style="table-layout: fixed">
                      <colgroup>
                        <col width="240" />
                        <col width="140" />
                        <col width="100" />
                        <col width="100" />
                        <col width="110" />
                        <col width="360" />
                      </colgroup>
                      <thead>
                        <tr>
                          <td>品种信息</td>
                          <td>类目</td>
                          <td style="text-align: right">平均月销</td>
                          <td style="text-align: right">销售指数</td>
                          <td style="text-align: right">较上周期</td>
                          <td style="text-align: right">简述</td>
                        </tr>
                      </thead>
                      <tbody v-if="dayDecrList.length > 0">
                        <tr v-for="(item, index) in dayDecrList" :key="index">
                          <td>
                            <div class="goods-desc">
                              <span class="goods-image" v-if="item.cover_pic">
                                <img
                                  :src="item.cover_pic"
                                  alt
                                  style="width: 40px; height: 40px"
                                />
                              </span>
                              <span
                                v-else
                                class="no-pic"
                                style="min-width: 40px; min-height: 40px"
                              ></span>
                              <span
                                class="click-font goods-name"
                                @click.stop="$toDetail(item.goods_id)"
                                >{{ item.goods_name }}</span
                              >
                            </div>
                          </td>
                          <td>
                            <span v-if="item.cate_node_2">{{
                              item.cate_node_2
                            }}</span>
                            <span v-if="item.cate_node_3"
                              >> {{ item.cate_node_3 }}</span
                            >
                          </td>
                          <td style="text-align: right">
                            {{ item.month_sales }}
                          </td>
                          <td style="text-align: right">
                            <span class="main-font">{{
                              item.sale_amount.toLocaleString()
                            }}</span>
                          </td>
                          <td style="text-align: right">
                            <span class="percent" v-if="item.compare_rate > 0"
                              >+{{ item.compare_rate }}%</span
                            >
                            <span
                              class="green"
                              v-else-if="item.compare_rate < 0"
                              >{{ item.compare_rate }}%</span
                            >
                            <span v-else>--</span>
                          </td>
                          <td style="text-align: right">
                            <span
                              class="data-tab data-tab-night data-tab-big"
                              v-for="(citem, cindex) in item.unusual_tags"
                              :key="cindex"
                              >{{ citem }}</span
                            >
                          </td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="6" style="text-align: center">
                            <div style="margin: 50px 0"><a-empty /></div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- 上周销售异动 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">上周销售异动</div>
                <div style="padding: 15px 0">
                  <div class="title-block">
                    <span class="trangle red">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trangleTop" />
                      </svg>
                    </span>
                    以下商品在上周销售异常增长
                  </div>
                  <div class="table" style="margin-bottom: 25px">
                    <table style="table-layout: fixed">
                      <colgroup>
                        <col width="240" />
                        <col width="140" />
                        <col width="100" />
                        <col width="100" />
                        <col width="110" />
                        <col width="360" />
                      </colgroup>
                      <thead>
                        <tr>
                          <td>品种信息</td>
                          <td>类目</td>
                          <td style="text-align: right">平均月销</td>
                          <td style="text-align: right">销售指数</td>
                          <td style="text-align: right">较上周期</td>
                          <td style="text-align: right">简述</td>
                        </tr>
                      </thead>
                      <tbody v-if="weekIncrList.length > 0">
                        <tr v-for="(item, index) in weekIncrList" :key="index">
                          <td>
                            <div class="goods-desc">
                              <span class="goods-image" v-if="item.cover_pic">
                                <img
                                  :src="item.cover_pic"
                                  alt
                                  style="width: 40px; height: 40px"
                                />
                              </span>
                              <span
                                v-else
                                class="no-pic"
                                style="min-width: 40px; min-height: 40px"
                              ></span>
                              <span
                                class="click-font goods-name"
                                @click.stop="$toDetail(item.goods_id)"
                                >{{ item.goods_name }}</span
                              >
                            </div>
                          </td>
                          <td>
                            <span v-if="item.cate_node_2">{{
                              item.cate_node_2
                            }}</span>
                            <span v-if="item.cate_node_3"
                              >> {{ item.cate_node_3 }}</span
                            >
                          </td>
                          <td style="text-align: right">
                            {{ item.month_sales }}
                          </td>
                          <td style="text-align: right">
                            <span class="main-font">{{
                              item.sale_amount.toLocaleString()
                            }}</span>
                          </td>
                          <td style="text-align: right">
                            <span class="percent" v-if="item.compare_rate > 0"
                              >+{{ item.compare_rate }}%</span
                            >
                            <span
                              class="green"
                              v-else-if="item.compare_rate < 0"
                              >{{ item.compare_rate }}%</span
                            >
                            <span v-else>--</span>
                          </td>
                          <td style="text-align: right">
                            <span
                              class="data-tab data-tab-eight data-tab-big"
                              v-for="(citem, cindex) in item.unusual_tags"
                              :key="cindex"
                              >{{ citem }}</span
                            >
                          </td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="6" style="text-align: center">
                            <div style="margin: 50px 0"><a-empty /></div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="title-block">
                    <span class="trangle green">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trangle" />
                      </svg>
                    </span>
                    以下商品在上周销售异常下降
                  </div>
                  <div class="table">
                    <table style="table-layout: fixed">
                      <colgroup>
                        <col width="240" />
                        <col width="140" />
                        <col width="100" />
                        <col width="100" />
                        <col width="110" />
                        <col width="360" />
                      </colgroup>
                      <thead>
                        <tr>
                          <td>品种信息</td>
                          <td>类目</td>
                          <td style="text-align: right">平均月销</td>
                          <td style="text-align: right">销售指数</td>
                          <td style="text-align: right">较上周期</td>
                          <td style="text-align: right">简述</td>
                        </tr>
                      </thead>
                      <tbody v-if="weekDecrList.length > 0">
                        <tr v-for="(item, index) in weekDecrList" :key="index">
                          <td>
                            <div class="goods-desc">
                              <span class="goods-image" v-if="item.cover_pic">
                                <img
                                  :src="item.cover_pic"
                                  alt
                                  style="width: 40px; height: 40px"
                                />
                              </span>
                              <span
                                v-else
                                class="no-pic"
                                style="min-width: 40px; min-height: 40px"
                              ></span>
                              <span
                                class="click-font goods-name"
                                @click.stop="$toDetail(item.goods_id)"
                                >{{ item.goods_name }}</span
                              >
                            </div>
                          </td>
                          <td>
                            <span v-if="item.cate_node_2">{{
                              item.cate_node_2
                            }}</span>
                            <span v-if="item.cate_node_3"
                              >> {{ item.cate_node_3 }}</span
                            >
                          </td>
                          <td style="text-align: right">
                            {{ item.month_sales }}
                          </td>
                          <td style="text-align: right">
                            <span class="main-font">{{
                              item.sale_amount.toLocaleString()
                            }}</span>
                          </td>
                          <td style="text-align: right">
                            <span class="percent" v-if="item.compare_rate > 0"
                              >+{{ item.compare_rate }}%</span
                            >
                            <span
                              class="green"
                              v-else-if="item.compare_rate < 0"
                              >{{ item.compare_rate }}%</span
                            >
                            <span v-else>--</span>
                          </td>
                          <td style="text-align: right">
                            <span
                              class="data-tab data-tab-night data-tab-big"
                              v-for="(citem, cindex) in item.unusual_tags"
                              :key="cindex"
                              >{{ citem }}</span
                            >
                          </td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="6" style="text-align: center">
                            <div style="margin: 50px 0"><a-empty /></div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style scoped lang="scss">
#abnormalPage {
  & .title-block {
    padding: 0 10px;
    margin: 0 15px;
    height: 40px;
    font-size: $fontSize - 2;
    background-color: $themeColor5;
    @include displayFlex(flex, null, center);
    & .trangle {
      font-size: $fontSize + 2;
      margin-right: 5px;
      &.red {
        color: $red;
      }
      &.green {
        color: $green;
      }
    }
  }
}
</style>
<script>
import { MYVIEW_ABNORMALGOODS } from "../../apis/publish.js";
export default {
  data() {
    return {
      pagePower: true,
      tabKey: "1",
      isLoading: true,
      dayIncrList: [],
      dayDecrList: [],
      weekIncrList: [],
      weekDecrList: [],
    };
  },
  mounted() {
    this.getData("day");
    this.getData("week");
  },
  methods: {
    async getData(type) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: type == "day" ? 1 : 2,
        period:
          type == "day"
            ? this.$beforeDate().replace(/-/g, "")
            : this.$weekDate().weekth,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYVIEW_ABNORMALGOODS(data);
      if (res.code == 0) {
        this.pagePower = true;
        if (type == "day") {
          this.dayIncrList = [];
          this.dayDecrList = [];
          if (res.data.incr) {
            this.dayIncrList = res.data.incr;
          }
          if (res.data.decr) {
            this.dayDecrList = res.data.decr;
          }
        } else {
          this.weekIncrList = [];
          this.weekDecrList = [];
          if (res.data.incr) {
            this.weekIncrList = res.data.incr;
          }
          if (res.data.decr) {
            this.weekDecrList = res.data.decr;
          }
        }
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    callback(key) {
      this.tabKey = key;
    },
    publisherChange() {
      this.isLoading = true;
      this.getData("day");
      this.getData("week");
    },
  },
};
</script>